							/*Tìm kiếm */
 tbody {
    	font-family: Segoe UI,Tahoma,Arial,Verdana;
    	font-size: 12px;
    }							
													
[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    margin-right: 2px;
    background-image: url("http://demo.webinterfacelab.com/14-to-do-list/img/sprite.png");
    background-repeat: no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

}

.icon-check { background-position: 0 0 }

.icon-add { background-position: -12px 0 }

.icon-delete { background-position: -24px 0 }

.icon-settings { background-position: -36px 0 }

.icon-previous { background-position: -48px 0 }

.icon-next { background-position: -60px 0 }

/* ========================================================
   Todo List
   =====================================================
   ================================================== */


.lt-ie9 .todo:before, .lt-ie9 .todo:after {
    height: 1px;
    border-top: 0;
}

.list-question-content { border-top: 1px solid #e6ebed;border-right: 1px solid #e6ebed;}

.list-question-content{
    position: relative;
    line-height: 21px;
    font-size: 12px;
    color: #8b8f97;
}

.list-question-content .toggle {
    display: block;
	height: 35px;
	width: 35px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    text-indent: 100%;
    overflow: hidden;
	cursor: pointer;
}

.toggle:after {
	content: '';
	position: absolute;
	position: absolute;
	width: 7px;
	height: 3px;
	background: transparent;
	top: 14px;
	left: 13px;
	border: 2px solid #aaa;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	opacity: 0;
}

.list-question-content .toggle:before {
    content: '';
    width: 15px;
    height: 15px;
    background: #faf9f9;
    border: 1px solid #6bb3ca;
    border-radius: 2px;
    position: absolute;
    top: 9px;
    left: 9px;
    -webkit-box-shadow: 0 1px 1px #dfecf4;
    -moz-box-shadow: 0 1px 1px #dfecf4;
    box-shadow: 0 1px 1px #dfecf4;
}

.list-question-content .toggle:hover:before {
    -webkit-box-shadow: 0 0 3px #6bb3ca;
    -moz-box-shadow: 0 0 3px #6bb3ca;
    box-shadow: 0 0 3px #6bb3ca;
}

.list-question-content .done .toggle:before, .list-question-content .toggle:active:before {
    border-color: #c0c0c0 #ccc #d8d8d8;
    -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 5px 5px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 5px 5px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 5px 5px rgba(0, 0, 0, 0.05);
}
.list-parent-controls {
	display: none;
    margin: 0 15px 12px 50px;
    height: 28px;
}

.list-parent-controls li { float: left }

.list-parent-controls li + li { margin-left: 10px }

.list-parent-controls .right { float: right }

.list-parent-controls a {
    display: block;
    margin: 0;
    opacity: .6;
}

.list-parent-controls a:hover { opacity: 1 }


/*------------------LIST VIEW ---------------------------*/
/*List question */
#list-container{
	background-color: #ffffff;
	width: 30%; 
	height:100%;
}	
	
#list-parent{
	width: 100%;
	overflow:auto;
	height:92%;
	max-height:545px;
}	
	
.list-question, .list-question1,
.list-question2, .list-question3,
.list-question4, .list-question5,
.list-question6, .list-question7, .list-question8{ 
	position: relative;
    line-height: 21px;
    font-size: 12px;
    color: #8b8f97;
    border-bottom: 1px solid #e6ebed;
	cursor: default;
	float:right;
	width: 92%;
	margion-left: 0px;
	padding-left: 2px;

}
.list-question: hover{
	background: #f00;
}

.list-question .active1{

}
last-child .list-question{
	 border-bottom: none;
}
.row1{
	bottom: 0;
	left: 23px;
	width: auto;
	white-space: nowrap;
	overflow: hidden;
	}
.row2{
	left: 0;
	padding-left: 4px;
	color: #00326a;
	font: bold 15px 'Segoe UI WPC Semibold','Segoe UI Semibold','Segoe UI',Tahoma,'Microsoft Sans Serif',Verdana,sans-serif;
	margin: -1px 0 0 0;
	height: 17px;
	padding-top: 5px;
}
.row3{
	position: relative;
	left: 0;
	height: 23px;
	width: 100%;
	line-height: 11px;
	font: bold 12px 'Segoe UI WPC','Segoe UI',Tahoma,'Microsoft Sans Serif',Verdana,sans-serif;
	color: #00326a;
	padding: 3px 4px 0;
}

#content-container{
	background-color:#ffffff; 
	width: auto; 
	height: 100%;
}

.list-email{
	float: left;
	padding-left: 4px;
}
.list-date{
	float: right;
	padding-right: 4px;
}
                                                        /*Tìm kiếm */                                                                                               
#quick-search{
        display: none;
        padding-right:20px;
        display: block;
}
              
#quick-search .search-bar{
        background: #4c66a3;
        display: block;
        margin: 0;
        padding: 8px 10px;
        position: relative;
        width: 100%;

}
#quick-search .search-bar label{
        
        display: block;
        width: 84%;
        padding: 0 10px;
        background: #ffffff;
        /*background: #ffffff url('../images/search.png') no-repeat scroll right;*/
}
#quick-search .search-bar input, #quick-search .search-bar button{ /* resetting to make it easier to work with */
         -webkit-apperance: none;
         -moz-apperance: none;
         apperance: none;
         background: transparent;
         border: none;
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
         box-shadow: none;
         color: inherit;
         display: block;
         font-size: 1.1em;
         color: #747474;
         line-height: 1em;
         outline: none;
         margin: 0;
         padding: 0;
}
#quick-search .search-bar input{
         line-height: 1.5em;
         padding: .4em 0;
         width: 93%;
         color: #8f95a1;
}
#quick-search .search-bar button{
         background: -webkit-linear-gradient(top, #4bb8d9, #238eb2);
         background: -moz-linear-gradient(top, #4bb8d9, #238eb2);
         background: -o-linear-gradient(top, #4bb8d9, #238eb2);
         background: linear-gradient(to bottom, #4bb8d9, #238eb2);
         margin-right:-15px;
         cursor: pointer;
         margin-top:2px;
         background: url('../images/tf-search-icon.png') no-repeat center;
         color: #4c66a3;
         position: relative;
         text-indent: -999em;
}
#quick-search .search-bar button{
         -webkit-border-radius: 0 1em 1em 0;
         -moz-border-radius: 0 1em 1em 0;
         border-radius: 0 1em 1em 0;
         font-size: 18px;
         height: 1.279em;
         position: absolute;
         right: 13px;
         width: 1.723em;
         top: 10px;
         top: 10px;
}
#quick-search .search-bar .icon-search-sm:after{
         margin-left: -.6em;
}
/* end quick search */

/************ END TEST ************/

#second-sidebar {width: 100%;height:89%; float: left;}

/********* SIDEBAR SECOND*******/
.tabs {
    height: 33px;
	background-color: #4c66a3;
}
.tabs li{
	width: 33.33%;
    float: left;
    line-height: 31px;
    border-left: none;
    margin-bottom: -2px;
    text-align: center;
}
.tabs li a{
    color: white;
    display: block;
    padding: 0px 14px;
    background-color: #4c66a3;
	text-decoration: none;
	border-right: 0.3px solid #7c8ebb;

}
.tabs li:last-child a{
    padding: 0px 37px 0px 5px;
}

.tabs li a:hover{
    background-color: #5a79c2;
}
.tabs li a.active{
    background-color: #3f568d;
    color: #ffffff;
}
.tab_container{
    border: 1px solid #bcd4da;
    border-top: none;
    margin: 0px 0px 20px 0px;
    height: 100%;
}

.tab_content ul li{
    /*border-bottom: 1px dotted #bcd4da;*/
    /*padding: 7px 0px;*/
}
.tab_content ul li a{
    color: #666;
}
.tab_content ul li a:hover{
    color: #ce9702;
}

.buttoncontrol{
	width: 170px;
	height: 100%;
	display: inline-block;
	cursor: pointer;
	border: 0 solid #018dc4;
	color: rgba(255,255,255,0.9);
	/*background: #4c66a3;*/
	background: #2980B9;
	float: right;
	margin : 5px;
	font-family:arial;
	font-weight: 600;
	font-size: 14px;
	padding-left: 5px;
	
}

.buttoncontrol:hover{
background-color: #3498DB;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

/* -------------- Controls for checkbox ---------- */
.actionsBox{
    font-size:13px;
    font-family:Helvetica,Arial,Verdana;
    font-style:normal;
    left:50%;
    position:absolute;
    top:-50px;
    top: -10%;
    opacity:0;
    cursor:move;
}
.actionsBox .menu{
    width:241px;
    color:#47708F;
    line-height:30px;
    text-shadow:1px 1px 0px #fff;
    padding:7px; 
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    font-weight:bold;
    border:1px solid #D9EAF2;
    background:#e8f4fa;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.58, rgb(217,234,242)),
        color-stop(0.93, rgb(232,244,250))
        );
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(217,234,242) 58%,
        rgb(232,244,250) 93%
        );
    -moz-box-shadow:1px 1px 3px #999;
    -webkit-box-shadow:1px 1px 3px #999;
    box-shadow:1px 1px 3px #999;	

}
.actionsBox .menu .button{
    padding:4px 7px;
    border:1px solid #D9EAF2;
    background:#e8f4fa;
    background:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.38, rgb(230,243,249)),
        color-stop(0.88, rgb(245,249,250))
        )
        ;
    background:
        -moz-linear-gradient(
        center bottom,
        rgb(230,243,249) 38%,
        rgb(245,249,250) 88%
        )
        ;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0px 1px 0px #f9f9f9;
    -webkit-box-shadow:0px 1px 0px #f9f9f9;
    box-shadow:0px 1px 0px #f9f9f9;
    cursor:pointer;
}
.actionsBox .menu .button:hover{
    background:#fff;
}
.actionsBox .menu span{
    padding:0px 10px;
}
.actionsBox .submenu{
    display:none;
    width:120px;
    margin-left:100px;
    top:46px;
    right:10px;
    background:#fff;
    border:1px solid #D9EAF2;
    border-top:none;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    -moz-box-shadow:0px 1px 4px #ddd;
    -webkit-box-shadow:0px 1px 4px #ddd;
    box-shadow:0px 1px 4px #ddd;
}
.actionsBox .submenu a{
    display:block;
    cursor:pointer;
    padding:10px 15px;
    border-top:1px solid #D9EAF2;
}
.actionsBox .submenu a.last{
    -moz-border-radius:0px 0px 10px 10px;
}
.actionsBox .submenu a.first{
    border-top:none;
}
.actionsBox .submenu a:hover{
    background-color:#f9f9f9;
}
.actionsBox .menu a.open,
.actionsBox .menu a.closed{
    border:1px solid #D9EAF2;
    padding:4px 17px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:0px 1px 0px #f9f9f9;
    -webkit-box-shadow:0px 1px 0px #f9f9f9;
    box-shadow:0px 1px 0px #f9f9f9;
    cursor:pointer;
    opacity:0.6;
    margin-right:5px;
}
.actionsBox .menu a.open{
    background:#fff url(../open.png) no-repeat center center;

}
.actionsBox .menu a.closed{
    background:#fff url(../closed.png) no-repeat center center;
}
.actionsBox .menu a.open:hover,
.actionsBox .menu a.closed:hover{
    opacity:1.0;
}

/* for checkbox */
.check{
    width:12px;
    cursor:default;
    position: relative;
    float: left;
    padding-top: 24px;
    padding-left: 8px;
    
}
.todo-pagination{
	padding-left: 50px;
	float: left;
	
}

/*********LOADING*********/

#loading {
	background:url("../images/WindowsPhoneProgressbar.gif") no-repeat center center;
	height: 100%; width: 100%;
	position: fixed; z-index: 1000;
}
/*********MESSAGE*********/
.error {
		color: #ff0000;
		font-style: italic;
		}
.success {
	color: #666666;
	padding: 17px 24px 19px 38px;
	margin-top: 200px;
	margin-left: 17%;
	font-size: 14px;
	width: 50%;
	height: 10%;
	position: absolute;
		}
		
.createQaA-title{
	width: 100%;
	height: 30px;
	margin-top: 5px;
	font-size: 10pt;
	padding:4px;
}
.createQaA-question{
	width: 100%;
	height: 50px;
	margin-top: 5px;
	font-size: 10pt;
	padding:4px;
}
.createQaA-answer{
	padding: 5px;
	margin: 5px;	
}
#quotation{
	display: block; 
	float: right; 
	text-align: center;
	 margin-top: 10px; 
	 color: red; 
	 font-size: 11pt; 
	 font-weight: bold;
}

/* Tab Content - menucool.com */
ul.tabbed
{
	width: 355px;
    padding: 11px 0 7px;
    font-size: 0;
    list-style-type: none;
    /*text-align: center; /*set to left, center, or right to align the tabs as desired*/
    background: #DDDDE3;
}
        
ul.tabbed li
{
    display: inline;
    margin: 0;
    margin-right: 2px;/*distance between tabs*/
    font: normal 12px Verdana;
}
        
ul.tabbed li a
{
    text-decoration: none;
    position: relative;
    padding: 8px 21px;
    color: #000;
    border-radius: 3px 3px 0 0;
    outline:none;
}

/*Note: IE8 and earlier doesn't support li:last-child. You have to add another class to the last tab (LI) and specify its border-right as below.*/
ul.tabbed li:last-child a
{
    border-right:1px solid #CCC;
}
  
        
ul.tabbed li a:hover
{
    color: #000;
    background: white;
}
ul.tabbed li a.active
{
    color: #000;
    background: white;
}
        
ul.tabbed li.selected a, ul.tabbed li.selected a:hover
{
    top: 0px;
    font-weight:normal;
    background: #FFF;
    border-bottom: 1px solid #FFF;
    color: #000;
}
        
        
ul.tabbed li.selected a:hover
{
    text-decoration: none;
}

div.tabcontents
{
    border-top: 1px solid #CCC; padding: 30px 10px;
}
#select_all:hover, #delete_all:hover{
	color: #00326a;
	font: bold 12px 'Segoe UI WPC','Segoe UI',Tahoma,'Microsoft Sans Serif',Verdana,sans-serif;
}
/*--------------update-------------------*/
#questionarea{
	width: 98%;
	margin: 1px 0 0 10px;
}
#question-info, #question-dateinfo{
	width: 100%;
	height: 17px;
	padding-top: 3px;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
}
#question-content{
	width: 100%;
	text-align: justify;
	margin-top: 5px;
	overflow-x: auto;
	height: 100px;
}
#answerarea{
	width: 98%;
	margin-top: 10px
}
#answer{
	font-size: 12px;
	font-weight: bold;
	color: #4e4e4e;
	padding-left: 10px;
}
#answer-content{
	width: 99%;
	padding: 5px 10px 0 14px;
	text-align: justify;
}
/*------------------button chỉnh sửa-------------*/
#update a:link {
	text-decoration: none;
	color: white;
}
#update a:visited {
	text-decoration: none;
	color: white;
} 
/* POP box for setting *******/	
#container-pop{
	display:inline; 
	float: right;
}

.popup-box {
	position: absolute;
	border-radius: 5px;
	background: #fff;
	display: none;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
	font-family: Arial, sans-serif;
	z-index: 9999999;
	font-size: 14px;
}

.popup-box .close {
	position: absolute;
	top: 0px;
	right: 0px;
	font-family: Arial, Helvetica, sans-serif;	
	font-weight: bold;
	cursor: pointer;
	color: #434343;
	padding: 5px;
	font-size: 20px;
}

.popup-box .close:hover {
	color: #000;
}

.popup-box h2 {
	padding: 0;
	margin: 0;
	font-size: 18px;
}
.popup-box .top {
	padding: 20px;
}

.popup-box .bottom {
	background: #eee;
	border-top: 1px solid #e5e5e5;
	padding: 20px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#blackout {
	background: rgba(0,0,0,0.3);
	position: absolute;
	top: 0;
	overflow: hidden;
	z-index: 9999;
	left: 0;
	display: none;
}
 .popup-link-1{
  	margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    color: #000000;
    font-weight: 300;

 	cursor: pointer;
 }  
 #user-grid{
	
	width: 60%;
	height: 100%;
	margin-left: 10px;
	float: left;
	margin-top: 5px;

}
#user-detail{
	
	width: 35%;
	padding-top: 10px;
	border: 1px dashed;
	float: left;
	background: #ffffff;
	margin-top: 10px;
}
#tableUser{
	background: #ffffff;
	margin-top: 2px;
	border-collapse: collapse;
	width: 98%;
}
#tableUser, th, td
{
	/*border: 1px solid black;*/
	padding: 2px;
	font-size: 10pt;
}
#tableUser, th{
	text-align: left;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}   

